import React, { Component } from 'react';
import { TextInput, StyleSheet, PixelRatio, View, Text } from 'react-native';
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import ToastUtil from '../../../../utils/toast';
const scale = GLOBAL.SCALE;

/* 
	type(number) : 0 意向客户  1 销售关联  2 关联列表
*/


export class RelevanceCpt extends Component {
	constructor(props) {
		super(props);
	}

	// 意向
	_type0 = () => {
		const { defaultData, onChangeRptText, onChangePriceText, onQuantityBlur, onPriceBlur } = this.props;
		const { uomName, planSellPrice, planSellQuantity, planGrossProfit } = defaultData || {};

		return (
			<View>
				<View style={styles.ctInputBox}>
					<TextInput
						style={styles.ctInput}
						keyboardType='numeric'
						defaultValue={(planSellQuantity || 0) + ''}
						onChangeText={(txt) => { onChangeRptText(txt) }}
						onBlur={() => { onQuantityBlur() }} />
					<Text style={styles.ctInputText}>{uomName || '吨'}</Text>
				</View>
				<View style={styles.ctInputBox}>
					<TextInput
						style={styles.ctInput}
						keyboardType='numeric'
						defaultValue={(planSellPrice || 0) + ''}
						onChangeText={(txt) => { onChangePriceText(txt) }}
						onBlur={() => { onPriceBlur() }}
					/>
					<Text style={styles.ctInputText}>元/{uomName || '吨'}</Text>
					<Text style={[styles.ctInputText, styles.money]} >毛利：<Text style={styles.ctInputTextRed}>¥ {planGrossProfit.toFixed(2) || 0} 元</Text></Text>
				</View>
			</View>)
	}

	//采购关联
	_type1 = () => {
		const { defaultData, onChangeMappingText, onQuantityBlur } = this.props;
		const { uomName, price, planGrossProfit, quantity } = defaultData || {};
		return (
			<View>
				<View style={styles.ctInputBox}>
					<Text style={[styles.ctInputText, styles.money]} >¥ {(price || 0).toFixed(2)}元/{uomName || '吨'}</Text>
					<Text style={[styles.ctInputText, styles.money]} >毛利：<Text style={styles.ctInputTextRed}>¥ {(planGrossProfit || 0).toFixed(2) || 0} 元</Text></Text>
				</View>
				<View style={styles.ctInputBox}>
					<TextInput
						style={styles.ctInput}
						keyboardType='numeric'
						defaultValue={(quantity || 0) + ''}
						onChangeText={(txt) => onChangeMappingText(txt)}
						onBlur={() => { onQuantityBlur() }} />
					<Text style={styles.ctInputText} >{uomName || '吨'}</Text>
				</View>
			</View >)
	}

	//采购关联 - 列表
	_type2 = () => {
		const { defaultData, onChangeMappingText, isChecked } = this.props;
		const { uomName, salePrice, purchasePrice, quantity, orderType, salesNoMappingQuantity, purchaseNoMappingQuantity } = defaultData || {};
		let planGrossProfit = parseFloat(salePrice - purchasePrice) * parseFloat(quantity);
		let planSellQuantity = orderType === 'S' ? salesNoMappingQuantity : purchaseNoMappingQuantity;
		return (<View>
			<View style={styles.ctInputBox}>
				<TextInput
					// ref='type2Input'
					style={styles.ctInput}
					keyboardType='numeric'
					defaultValue={(planSellQuantity || 0) + ''}
					onChangeText={(txt) => {
						onChangeMappingText(txt)
					}} />
				<Text style={styles.ctInputText} >{uomName || '吨'}</Text>
				{isChecked ? <Text style={[styles.ctInputText, styles.money]} >毛利：<Text style={styles.ctInputTextRed}>¥ {(planGrossProfit || 0).toFixed(2) || 0} 元</Text></Text> : null}
			</View>
		</View >)
	}

	render () {
		let { data } = this.props;
		let { type } = data || {};
		if (type === 0) {
			return this._type0();
		} else if (type === 1) {
			return this._type1();
		} else {
			return this._type2()
		}
	}
}

const styles = StyleSheet.create({
	ctInputBox: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'center',
		paddingTop: 8 * scale,
		paddingBottom: 8 * scale
	},
	ctInput: {
		fontSize: 13 * scale,
		borderWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderColor: style.color.gray,
		height: 28 * scale,
		width: 100 * scale,
		marginRight: 5 * scale,
		paddingVertical: 0,
		textAlign: 'center'
	},
	ctInputText: {
		fontSize: 13 * scale,
	},
	ctInputTextRed: {
		color: style.color.lightRed
	},
	money: {
		paddingLeft: 15 * scale
	}
})